<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>

var serverPid=""

function fieldClick(xval,yval){
    //alert('f-click '+xval+' '+yval)
    document.getElementById('fieldCell'+xval+"_"+yval).style.backgroundColor="#ffdddd"

    $.post('ajaxpost', {pid:serverPid, x:xval, y:yval}, function(data) {
        //alert('ajax recv '+data.xc+" "+data.yc)
        if( data.cell_not_free ){
            alert("This cell is occupied - cell_not_free "+xval+' '+yval)
        }else if( data.error ){
                alert("Error calling game session")
        }else{
          setMark(data.human_xc,data.human_yc,'o')
          if( data.human_win ){
              alert("You won, human!")
          }else{
            setMark(data.xc,data.yc,'x')
            if( data.comp_win ){
                alert("I (the comp) won!")
            }
          }
        }
        //$('.result').html(data);
    });
}

function initField(){
    $.post('init_field', {}, function(data) {
        drawField(data.coord_min, data.coord_max)
        setMark(data.xc,data.yc,'x')
        serverPid = data.pid
    })
}

function fieldMouseOver(x,y){
	//alert(x+" "+y)
	document.getElementById('fieldCell'+x+"_"+y).style.backgroundColor="#e0e0e0"
}
function fieldMouseOut(x,y){
	document.getElementById('fieldCell'+x+"_"+y).style.backgroundColor="transparent"
}

function setMark(x,y,mark){
    //alert('setMark')
	document.getElementById('fieldCell'+x+"_"+y).innerHTML=mark
}

function drawField(coordMin,coordMax){
    s=""
	s+=("<table id=field cellspacing=0 border=1>")
	for( var i=coordMin; i<=coordMax; i++ ){
		s+=("<tr>")
		for( var j=coordMin; j<=coordMax; j++ ){
			s+=(
			"<td width=20 heigth=20 align=center valign=middle "+
			"id=fieldCell"+j+"_"+i
			+" onmouseover='fieldMouseOver("+j+","+i+")' "
			+" onmouseout='fieldMouseOut("+j+","+i+")' "
			+" onclick='fieldClick("+j+","+i+")' "+">&nbsp;</td>")
		}
		s+=("</tr>")
	}
	s+=("</table>")
    document.getElementById('fdiv').innerHTML=s
}
function humanPlayer(lastMove,myMark,nextCallback){
	fieldClickCallback = function(x,y){
		fieldClickCallback=0
		nextCallback(x,y)
	}
}
function msg(s){
	document.getElementById('msg').innerHTML=s
}
function colorify(color,msg){
	return '<span style="color:'+color+'">'+msg+'</span>'
}
function playerSelect(domId,markChar,color){
	type = document.getElementById(domId).value
	p = {
		f: type=='computer' ? computerPlayer : humanPlayer,
		mark: markChar,
		msg: colorify(color, 'Player '+markChar+ " " + type + " now - move!")
	}
	return p
}
function startGame(){
	p1 = playerSelect('sp1','x','blue') // {f:humanPlayer, mark:'x', msg:colorify('blue','p1 (x) - move!')}
	p2 = playerSelect('sp2','o','green') // {f:humanPlayer, mark:'o', msg:'p2 (o) - move!'}
	document.getElementById('startButton').disabled=true
	doGame(p1,p2,[])
}

function doGame(player,opponent,lastMove){
	msg(player.msg+" lastMove "+lastMove)
	player.f(lastMove,player.mark,function(x,y){
		fdata[x][y]=player.mark
		setMark(x,y,player.mark)
		if( isWinning(x,y) ){
			msg(colorify('red',player.mark + " is the winner!!!"))
			alert(player.mark + " is the winner!!!")
		}else{
			setTimeout(function(){ doGame(opponent,player,[x,y]) }, 500)
		}
	})
}


</script>

<body onload='initField()'>
Just click to play
<div id='fdiv'></div>
</body>